<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-md transition-all duration-300">
      <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16 md:h-20">
          <!-- Logo -->
          <div class="flex items-center">
            <router-link to="/" class="flex items-center">
              <i class="fas fa-book text-primary text-2xl md:text-3xl mr-2"></i>
              <span class="text-xl md:text-2xl font-bold text-primary" style="font-weight: 700;">书香阁</span>
            </router-link>
          </div>

          <!-- 主导航 - 桌面版 -->
          <nav class="hidden md:flex items-center space-x-8">
            <router-link to="/home" class="font-medium text-gray-600 hover:text-primary transition-colors py-1">首页</router-link>
            <router-link to="/category" class="font-medium text-gray-600 hover:text-primary transition-colors py-1">分类</router-link>
            <router-link to="/bestseller" class="font-medium text-gray-600 hover:text-primary transition-colors py-1">畅销榜</router-link>
            <router-link to="/news" class="font-medium text-gray-600 hover:text-primary transition-colors py-1">资讯</router-link>
          </nav>

          <!-- 搜索框 -->
          <div class="hidden md:flex items-center flex-1 max-w-md mx-8">
            <div class="relative w-full flex">
              <el-input
                v-model="searchKeyword"
                placeholder="请输入您喜欢的商品"
                class="search-input flex-1"
                @keyup.enter="handleSearch"
              >
                <template #prefix>
                  <i class="fas fa-search text-gray-400"></i>
                </template>
              </el-input>
              <button
                @click="handleSearch"
                class="search-button ml-2 px-4 py-2 text-white rounded-full transition-colors flex items-center justify-center"
              >
                <i class="fas fa-search"></i>
              </button>
            </div>
          </div>

          <!-- 用户工具栏 -->
          <div class="flex items-center space-x-4">
            <button class="relative p-2 text-gray-600 hover:text-primary transition-colors">
              <i class="fas fa-bell text-lg"></i>
              <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
            </button>
            <button class="relative p-2 text-primary transition-colors">
              <i class="fas fa-shopping-cart text-lg"></i>
              <span class="absolute -top-1 -right-1 bg-primary text-white text-xs rounded-full w-5 h-5 flex items-center justify-center cart-badge">{{ cartCount }}</span>
            </button>

            <!-- 用户下拉菜单 -->
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link cursor-pointer flex items-center">
                <el-avatar :size="32" :src="getImageUrl(userStore.userInfo?.avatar)">
                  <i class="fas fa-user"></i>
                </el-avatar>
                <span class="hidden md:block ml-2 text-gray-600">{{ userStore.userInfo?.username }}</span>
                <i class="fas fa-chevron-down ml-1 text-gray-400"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人资料</el-dropdown-item>
                  <el-dropdown-item command="orders">我的订单</el-dropdown-item>
                  <el-dropdown-item command="settings">设置</el-dropdown-item>
                  <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <!-- 移动端菜单按钮 -->
            <button @click="toggleMobileMenu" class="md:hidden p-2 text-gray-600 hover:text-primary transition-colors">
              <i class="fas fa-bars text-xl"></i>
            </button>
          </div>
        </div>

        <!-- 移动端搜索框 -->
        <div class="md:hidden pb-4">
          <div class="flex">
            <el-input
              v-model="searchKeyword"
              placeholder="请输入您喜欢的商品"
              class="search-input flex-1"
              @keyup.enter="handleSearch"
            >
              <template #prefix>
                <i class="fas fa-search text-gray-400"></i>
              </template>
            </el-input>
            <button
              @click="handleSearch"
              class="search-button ml-2 px-4 py-2 text-white rounded-full transition-colors flex items-center justify-center"
            >
              <i class="fas fa-search"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- 移动端导航菜单 -->
      <div v-show="showMobileMenu" class="md:hidden bg-white border-t border-gray-100 shadow-lg">
        <div class="container mx-auto px-4 py-3 space-y-3">
          <router-link to="/home" class="block py-2 px-3 rounded-lg hover:bg-gray-100 transition-colors">首页</router-link>
          <router-link to="/category" class="block py-2 px-3 rounded-lg hover:bg-gray-100 transition-colors">分类</router-link>
          <router-link to="/bestseller" class="block py-2 px-3 rounded-lg hover:bg-gray-100 transition-colors">畅销榜</router-link>
          <router-link to="/news" class="block py-2 px-3 rounded-lg hover:bg-gray-100 transition-colors">资讯</router-link>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-6">
      <!-- 页面标题 -->
      <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">购物车</h1>
        <div class="flex items-center text-gray-600">
          <i class="fas fa-shopping-cart mr-2"></i>
          <span>您已选择了 {{ cartCount }} 种商品，共 {{ totalQuantity }} 件</span>
        </div>
      </div>

      <!-- 有商品时显示购物车内容 -->
      <div v-if="cartItems.length > 0" class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        <!-- 购物车商品列表 -->
        <div class="lg:col-span-3">
          <!-- 表头 -->
          <div class="bg-white rounded-t-xl border border-gray-200 px-6 py-4">
            <div class="grid grid-cols-12 gap-4 text-sm font-medium text-gray-600">
              <div class="col-span-6">商品信息</div>
              <div class="col-span-2 text-center">单价</div>
              <div class="col-span-2 text-center">数量</div>
              <div class="col-span-2 text-center">小计</div>
            </div>
          </div>

          <!-- 商品列表 -->
          <div class="bg-white border-l border-r border-gray-200">
            <div
              v-for="(item, index) in paginatedCartItems"
              :key="item.id"
              :class="[
                'px-6 py-6 border-b border-gray-100 hover:bg-gray-50 transition-colors',
                index === paginatedCartItems.length - 1 ? 'border-b-0' : ''
              ]"
            >
              <div class="grid grid-cols-12 gap-4 items-center">
                <!-- 商品信息 -->
                <div class="col-span-6 flex items-center space-x-4">
                  <div class="flex-shrink-0">
                    <img
                      :src="getImageUrl(item.cover)"
                      :alt="item.title"
                      class="w-20 h-24 object-cover rounded-lg shadow-sm"
                      @error="handleImageError"
                    >
                  </div>
                  <div class="flex-1 min-w-0">
                    <h3 class="text-lg font-medium text-gray-800 line-clamp-2 mb-1">{{ item.title }}</h3>
                    <p class="text-sm text-gray-500 mb-2">作者：{{ item.author }}</p>
                    <button
                      @click="removeItem(item)"
                      class="text-sm text-red-500 hover:text-red-700 transition-colors flex items-center"
                    >
                      <i class="fas fa-trash mr-1"></i>
                      删除
                    </button>
                  </div>
                </div>

                <!-- 单价 -->
                <div class="col-span-2 text-center">
                  <span class="text-lg font-bold text-primary">¥{{ item.price.toFixed(2) }}</span>
                </div>

                <!-- 数量控制 -->
                <div class="col-span-2 flex items-center justify-center">
                  <div class="flex items-center border border-gray-300 rounded-lg">
                    <button
                      @click="decreaseQuantity(item)"
                      class="w-10 h-10 flex items-center justify-center hover:bg-gray-100 transition-colors rounded-l-lg"
                    >
                      <i class="fas fa-minus text-xs text-gray-600"></i>
                    </button>
                    <span class="w-12 h-10 flex items-center justify-center font-medium border-l border-r border-gray-300">{{ item.quantity }}</span>
                    <button
                      @click="increaseQuantity(item)"
                      class="w-10 h-10 flex items-center justify-center hover:bg-gray-100 transition-colors rounded-r-lg"
                    >
                      <i class="fas fa-plus text-xs text-gray-600"></i>
                    </button>
                  </div>
                </div>

                <!-- 小计 -->
                <div class="col-span-2 text-center">
                  <span class="text-lg font-bold text-gray-800">¥{{ (item.price * item.quantity).toFixed(2) }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 分页组件 -->
          <div v-if="cartItems.length > pageSize" class="bg-white border-l border-r border-gray-200 px-6 py-4">
            <el-pagination
              v-model:current-page="currentPage"
              :page-size="pageSize"
              :total="cartItems.length"
              layout="prev, pager, next, jumper"
              :hide-on-single-page="false"
              class="flex justify-center"
              small
            />
          </div>

          <!-- 底部操作栏 -->
          <div class="bg-white rounded-b-xl border border-gray-200 border-t-0 px-6 py-4">
            <div class="flex items-center justify-between">
              <button
                @click="clearCart"
                class="text-red-500 hover:text-red-700 transition-colors flex items-center"
              >
                <i class="fas fa-trash mr-2"></i>
                清空购物车
              </button>
              <div class="flex items-center space-x-6">
                <div class="text-lg">
                  <span class="text-gray-600">已选择 </span>
                  <span class="font-bold text-primary">{{ totalQuantity }}</span>
                  <span class="text-gray-600"> 件商品</span>
                </div>
                <div class="text-xl">
                  <span class="text-gray-600">合计：</span>
                  <span class="font-bold text-primary text-2xl">¥{{ subtotal }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 订单摘要 -->
        <div class="lg:col-span-1">
          <div class="bg-white rounded-xl shadow-lg border border-gray-200 sticky top-24">
            <div class="p-6 border-b border-gray-100">
              <h2 class="text-xl font-bold text-gray-800 flex items-center">
                <i class="fas fa-receipt mr-2 text-primary"></i>
                订单摘要
              </h2>
            </div>

            <div class="p-6 space-y-4">
              <div class="space-y-3">
                <div class="flex justify-between text-base">
                  <span class="text-gray-600">商品总价</span>
                  <span class="font-medium">¥{{ subtotal }}</span>
                </div>
                <div class="flex justify-between text-base">
                  <span class="text-gray-600">运费</span>
                  <span class="font-medium">
                    <span v-if="shipping === 0" class="text-green-600">免运费</span>
                    <span v-else>¥{{ shipping.toFixed(2) }}</span>
                  </span>
                </div>
                <div v-if="parseFloat(subtotal) < 99 && parseFloat(subtotal) > 0" class="text-sm text-orange-600 bg-orange-50 p-3 rounded-lg">
                  <i class="fas fa-info-circle mr-1"></i>
                  再购买 ¥{{ (99 - parseFloat(subtotal)).toFixed(2) }} 即可免运费
                </div>
              </div>

              <div class="border-t border-gray-200 pt-4">
                <div class="flex justify-between text-xl font-bold">
                  <span class="text-gray-800">总计</span>
                  <span class="text-primary">¥{{ total.toFixed(2) }}</span>
                </div>
              </div>

              <div class="space-y-3 pt-4">
                <button
                  @click="checkout"
                  :disabled="cartItems.length === 0"
                  :class="[
                    'w-full py-4 rounded-lg font-bold text-lg transition-all duration-300',
                    cartItems.length === 0
                      ? 'bg-gray-300 text-gray-500 cursor-not-allowed'
                      : 'bg-primary text-white hover:bg-primary-dark hover:shadow-lg transform hover:-translate-y-0.5'
                  ]"
                >
                  <i class="fas fa-credit-card mr-2"></i>
                  立即结算
                </button>

                <button
                  @click="continueShopping"
                  class="w-full border-2 border-primary text-primary py-3 rounded-lg font-medium hover:bg-primary/10 hover:text-primary transition-all duration-300"
                >
                  <i class="fas fa-arrow-left mr-2"></i>
                  继续购物
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 空购物车状态 -->
      <div v-else class="text-center py-16">
        <div class="mb-8">
          <i class="fas fa-shopping-cart text-6xl text-gray-300 mb-4"></i>
          <h3 class="text-2xl font-bold text-gray-600 mb-2">购物车是空的</h3>
          <p class="text-gray-500">快去挑选您喜欢的图书吧！</p>
        </div>
        <button
          @click="continueShopping"
          class="bg-primary text-white px-8 py-3 rounded-full font-medium hover:bg-primary-dark transition-colors"
        >
          <i class="fas fa-book mr-2"></i>
          去购物
        </button>
      </div>
    </main>

    <!-- 底部页脚 -->
    <footer class="bg-gray-900 text-white py-10">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <!-- 关于我们 -->
          <div>
            <h3 class="text-lg font-bold mb-4 text-primary">关于书香阁</h3>
            <p class="text-gray-400 text-sm">
              书香阁是专业的网上书店，提供超过10万种图书在线购买，支持快递配送和自提服务，让阅读触手可及。
            </p>
            <div class="flex space-x-4 mt-4">
              <a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-weixin text-xl"></i></a>
              <a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-weibo text-xl"></i></a>
              <a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-qq text-xl"></i></a>
              <a href="#" class="text-gray-400 hover:text-primary"><i class="fas fa-envelope text-xl"></i></a>
            </div>
          </div>

          <!-- 快捷链接 -->
          <div>
            <h3 class="text-lg font-bold mb-4 text-primary">快捷链接</h3>
            <ul class="space-y-2 text-sm">
              <li><router-link to="/category" class="text-gray-400 hover:text-primary">分类浏览</router-link></li>
              <li><a href="#" class="text-gray-400 hover:text-primary">热门排行</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary">最新上架</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary">特价促销</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary">读者推荐</a></li>
            </ul>
          </div>

          <!-- 客户服务 -->
          <div>
            <h3 class="text-lg font-bold mb-4 text-primary">客户服务</h3>
            <ul class="space-y-2 text-sm">
              <li><a href="#" class="text-gray-400 hover:text-primary">常见问题</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary">配送方式</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary">支付方式</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary">退换政策</a></li>
              <li><a href="#" class="text-gray-400 hover:text-primary">联系我们</a></li>
            </ul>
          </div>

          <!-- 联系方式 -->
          <div>
            <h3 class="text-lg font-bold mb-4 text-primary">联系我们</h3>
            <ul class="space-y-3 text-sm">
              <li class="flex items-start">
                <i class="fas fa-map-marker-alt text-primary mt-1 mr-3"></i>
                <span class="text-gray-400">北京市朝阳区建国路88号</span>
              </li>
              <li class="flex items-center">
                <i class="fas fa-phone text-primary mr-3"></i>
                <span class="text-gray-400">400-800-1234</span>
              </li>
              <li class="flex items-center">
                <i class="fas fa-envelope text-primary mr-3"></i>
                <span class="text-gray-400">service@bookstore.com</span>
              </li>
              <li class="flex items-center">
                <i class="fas fa-clock text-primary mr-3"></i>
                <span class="text-gray-400">周一至周日 9:00-22:00</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- 版权信息 -->
        <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
          <div class="text-gray-500 text-sm mb-4 md:mb-0">
            © {{ new Date().getFullYear() }} 书香阁 版权所有 | 京ICP备12345678号
          </div>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-500 text-sm hover:text-primary">隐私政策</a>
            <a href="#" class="text-gray-500 text-sm hover:text-primary">使用条款</a>
            <a href="#" class="text-gray-500 text-sm hover:text-primary">网站地图</a>
          </div>
        </div>
      </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <BackToTop />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useCartStore } from '@/stores/cart'
import { ElMessage, ElMessageBox } from 'element-plus'
import ggbondImg from '@/assets/images/ggbond.png'
import BackToTop from '@/components/BackToTop.vue'

const router = useRouter()
const userStore = useUserStore()
const cartStore = useCartStore()

// 响应式数据
const searchKeyword = ref('')
const showMobileMenu = ref(false)

// 分页相关数据
const currentPage = ref(1)
const pageSize = ref(3) // 每页显示3条数据

// 计算属性
const cartItems = computed(() => cartStore.cartItems)
const cartCount = computed(() => cartStore.cartCount)
const subtotal = computed(() => cartStore.cartTotal)

// 分页后的购物车商品
const paginatedCartItems = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return cartItems.value.slice(start, end)
})

// 总页数
const totalPages = computed(() => {
  return Math.ceil(cartItems.value.length / pageSize.value)
})

const totalQuantity = computed(() => {
  return cartItems.value.reduce((total, item) => total + item.quantity, 0) // 商品总数量
})

const shipping = computed(() => {
  return subtotal.value >= 99 ? 0 : 10 // 满99免运费
})

const total = computed(() => {
  return parseFloat(subtotal.value) + shipping.value
})

// 方法
const toggleMobileMenu = () => {
  showMobileMenu.value = !showMobileMenu.value
}

const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    ElMessage.info(`搜索功能开发中，搜索关键词：${searchKeyword.value}`)
  }
}

const increaseQuantity = async (item) => {
  try {
    await cartStore.updateQuantity(item.id, item.quantity + 1)
  } catch (error) {
    console.error('增加数量失败:', error)
  }
}

const decreaseQuantity = async (item) => {
  if (item.quantity > 1) {
    try {
      await cartStore.updateQuantity(item.id, item.quantity - 1)
    } catch (error) {
      console.error('减少数量失败:', error)
    }
  } else {
    ElMessage.warning('商品数量不能少于1')
  }
}

const removeItem = async (item) => {
  try {
    await ElMessageBox.confirm(
      `确定要从购物车中移除《${item.title}》吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    await cartStore.removeFromCart(item.id)
    ElMessage.success(`已从购物车中移除《${item.title}》`)

    // 检查当前页是否还有商品，如果没有则回到上一页
    const totalPagesAfterRemove = Math.ceil(cartStore.cartItems.length / pageSize.value)
    if (currentPage.value > totalPagesAfterRemove && totalPagesAfterRemove > 0) {
      currentPage.value = totalPagesAfterRemove
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除商品失败:', error)
    }
  }
}

const clearCart = async () => {
  if (cartItems.value.length === 0) {
    ElMessage.warning('购物车已经是空的')
    return
  }

  try {
    await ElMessageBox.confirm(
      '确定要清空购物车吗？此操作不可恢复。',
      '确认清空',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    await cartStore.clearCart()
    ElMessage.success('购物车已清空')

    // 重置分页到第一页
    currentPage.value = 1
  } catch (error) {
    if (error !== 'cancel') {
      console.error('清空购物车失败:', error)
    }
  }
}

const checkout = () => {
  if (cartItems.value.length === 0) {
    ElMessage.warning('购物车为空，请先添加商品')
    return
  }
  router.push('/checkout')
}

const continueShopping = () => {
  router.push('/home')
}

// 处理下拉菜单命令
const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'orders':
      router.push('/orders')
      break
    case 'settings':
      router.push('/settings')
      break
    case 'logout':
      handleLogout()
      break
  }
}

// 处理登出
const handleLogout = () => {
  userStore.logout()
  ElMessage.success('已退出登录')
  router.push('/login')
}

// 获取图片URL
const getImageUrl = (url) => {
  if (!url) return ''

  // 如果是完整的URL，直接返回
  if (url.startsWith('http')) {
    return url
  }

  // 如果是上传的文件路径
  if (url.startsWith('/uploads/')) {
    return `http://localhost:8081/api${url}`
  }

  // 如果是静态资源路径
  if (url.startsWith('/assets/')) {
    return `http://localhost:8081/api${url}`
  }

  // 其他情况，添加API前缀
  return `/api${url}`
}

// 图片加载错误处理
const handleImageError = (event) => {
  event.target.src = ggbondImg
}

// 生命周期
onMounted(async () => {
  // 初始化购物车数据
  try {
    await cartStore.initializeCart()
  } catch (error) {
    console.error('初始化购物车失败:', error)
  }
})
</script>

<style scoped>
/* 自定义样式 */
:root {
  --primary: #FF6B8A;
  --primary-light: #FFB3C6;
  --primary-dark: #E55A7A;
  --secondary: #FFF0F3;
  --accent: #FF8FA3;
  --success: #4CAF50;
  --warning: #FF9800;
  --info: #2196F3;
  --dark: #2D3748;
  --gray: #718096;
  --light-gray: #F7FAFC;
  --white: #FFFFFF;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  color: #606266;
  transition: color 0.3s ease;
}

.el-dropdown-link:hover {
  color: var(--primary);
}

/* 搜索框样式 */
.search-input :deep(.el-input__wrapper) {
  border-radius: 9999px;
  border: 1px solid #d1d5db;
  transition: all 0.3s ease;
}

.search-input :deep(.el-input__wrapper):hover {
  border-color: var(--primary);
}

.search-input :deep(.el-input__wrapper.is-focus) {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(255, 107, 139, 0.2);
}

/* 搜索按钮样式 */
.search-button {
  background-color: #FF6B8B !important;
}

.search-button:hover {
  background-color: rgba(255, 107, 139, 0.8) !important;
}

/* 文本截断 */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 主题色定义 */
.text-primary {
  color: rgb(255, 107, 139) !important;
}

.bg-primary {
  background-color: #FF6B8B !important;
}

.border-primary {
  border-color: #FF6B8B !important;
}

.hover\:border-primary:hover {
  border-color: #FF6B8B !important;
}

.hover\:text-primary:hover {
  color: #FF6B8B !important;
}

.bg-primary-dark {
  background-color: #E55A7A !important;
}

.hover\:bg-primary-dark:hover {
  background-color: #E55A7A !important;
}

/* 购物车特定样式 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 数量控制按钮样式 */
.quantity-btn {
  transition: all 0.2s ease;
}

.quantity-btn:hover {
  background-color: #f3f4f6;
  transform: scale(1.05);
}

/* 商品卡片悬停效果 */
.cart-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 结算按钮动画 */
.checkout-btn {
  position: relative;
  overflow: hidden;
}

.checkout-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.checkout-btn:hover::before {
  left: 100%;
}

/* 移动端适配 */
@media (max-width: 1024px) {
  .grid.grid-cols-12 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .col-span-6,
  .col-span-2 {
    width: 100%;
  }

  .text-center {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .grid.lg\\:grid-cols-4 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .lg\\:col-span-3,
  .lg\\:col-span-1 {
    grid-column: span 1;
  }

  .sticky {
    position: relative;
    top: auto;
  }
}

.cart-badge {
  z-index: 10;
  transform: translate(25%, -25%);
  min-width: 18px;
  height: 18px;
}
</style>
